<template>
  <div class="play-list">
	<div class="play-list-content">
		<div v-for="(item,index) in playList" :key="index" class="play-list-flex">
			<div @click="enterMusicListDetail(index)">
				<div class="artist-img" v-if="item.type ==0">
					<el-image
					    style="width: 180px; height: 180px"
					    :src="item.picUrl"
					></el-image>
				
				</div>
				<div class="artist-img" v-else>
					<el-image
					    style="width: 180px; height: 180px"
					    :src="item.coverImgUrl"
					></el-image>
				</div>
				<div class="play-list-top">
				  <div class="top-playCount">
					  <i class="iconfont icon-erji"></i>{{item.playCount}}
				  </div>
				  <div class="top-font">
				  	  热门推荐
				  </div>
				</div>
				<div class="play-list-bottom">
				   <i class="iconfont icon-icon_play"></i>
				</div>
				<div class="artist-name">{{item.name}}</div>
			</div>
		</div>
	</div>
  </div>
</template>

<script>


export default {
  name:'PlayList',
  props:['playList'],
  data(){
    return{
      
    }
  },
  created(){
	 console.log()
  },
  filters:{
  },
  methods:{
   enterMusicListDetail(index) {
      this.$router.push(
        "/musiclistdetail/" +
          this.playList[index].id +
          "/" +
          new Date().getTime()
      );
    },
  }
}
</script>

<style lang="less" scoped>
    .play-list{
		width: 100%;
		.play-list-content{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
	}
    .play-list-flex{
		position: relative;
		padding: 10px 0 20px 0;
		.play-list-top {
			width: 100%;
			height: 20px;
			position: absolute;
			top: 10px;
			left: 0;
			text-align: right;
			color: #FFFFFF;
			font-size: 14px;
			.top-playCount{
				display: block;
			}
			.top-font{
				display: none;
				text-align: left;
			}
		}
		.play-list-bottom{
			display: none;
			width: 30px;
			height: 30px;
			background-color: rgba(255, 255, 255, 0.5);
			position: absolute;
			bottom: 50px;
			left: 8px;
			color: orangered;
			border-radius: 50%;
		    .icon-icon_play{
				position: absolute;
				top:6px;
				left: 6px;
			}
		}
	}
	.play-list-flex:hover .top-playCount{
		display: none;
	}
	.play-list-flex:hover .top-font{
		display: block;
	}
	.play-list-flex:hover .play-list-bottom{
		display: block;
	}
	.artist-name{
		font-size: 14px;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		width: 180px;
	}
	
</style>

